
{% extends 'base.html.twig' %}

{% block stylesheets %}
    <style>
        .buddhawrapper {
            width: 320px; height: 557px;
            background: url("{{ imgsrc('images/part6/8.png') }}") no-repeat center center;
            background-size: cover;
        }
        .buddha {
            width: 320px; height: 557px;
            background-color: yellow;
            mask-image: url("{{ imgsrc('images/buddhamask@2x.png') }}");
            -webkit-mask-image: url("{{ imgsrc('images/buddhamask@2x.png') }}");
            mask-size: cover;
            -webkit-mask-size: cover;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="buddhawrapper">
        <div class="buddha">
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        $(function(){
            var index = 0;
            var colors = ['#EE0000', '#777777', '#00EE00', '#0000EE'];
            $('.buddha').on('touchstart', function(){
                $(this).css('backgroundColor', colors[index]);
                index = (index+1)%colors.length;
            });
        });
    </script>
{% endblock %}